<template>
  <view class="search-blog-container">
    <!-- search模块 -->
    <view class="search-bar-box">
      <my-search
        :isShowInput="true"
        :placeholderText="defaultText"
        v-model="searchVal"
        :config="{ backgroundColor: '#f1f0f3' }"
        @search="onSearchConfirm"
        @focus="onSearchFocus"
        @blur="onSearchBlur"
        @clear="onSearchClear"
        @cancel="onSearchCancel"
      ></my-search>
    </view>
    <!-- 热搜列表 -->
    <view class="search-hot-list-box card" v-if="showType === HOT_LIST">
      <search-hot-list @onSearch="onSearchConfirm"></search-hot-list>
    </view>
    <!--搜索历史-->
    <view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">
      <search-history
        :searchData="searchData"
        @onSearch="onSearchConfirm"
      ></search-history>
    </view>
    <!--搜索结果-->
    <view class="search-result-list-box" v-else>
      <!-- 1.给mescroll-body的组件添加：ref="mescrollItem" mescrollItem是固定的，不可以变化 -->
      <search-result-list
        ref="mescrollItem"
        :queryStr="searchVal"
      ></search-result-list>
    </view>
  </view>
</template>

<script>
// 2.引入 mescroll-comp.js
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp";
import { mapState, mapMutations } from "vuex";
import { getDefaultText } from "@/api/search.js";
import searchHistory from "../../../components/search-history/search-history.vue";
import SearchResultList from "../../../components/search-result-list/search-result-list.vue";
//热搜列表
const HOT_LIST = "0";
//搜索历史
const SEARCH_HISTORY = "1";
//搜索结果
const SEARCH_RESULT = "2";
export default {
  components: { searchHistory, SearchResultList },
  // 3.注册mixins
  mixins: [MescrollCompMixin],
  data() {
    return {
      //输入框中的内容
      searchVal: "",
      //输入框中的提示文字
      defaultText: "",
      /* 默认情况下||点击了输入框的取消按钮时显示【热搜列表】 
      当searchBar获取焦点时||点击输入框清空按钮时，显示【搜索历史】
      用户点击热搜列表item||用户点击搜索历史item||用户按下搜索键，显示【搜索结果】
       */
      HOT_LIST,
      SEARCH_HISTORY,
      SEARCH_RESULT,
      showType: HOT_LIST,
    };
  },
  created() {
    this.loadDefaultText();
  },
  computed: {
    ...mapState("search", ["searchData"]),
  },
  methods: {
    ...mapMutations("search", ["addSearchData"]),
    // 获取推荐搜索文本
    async loadDefaultText() {
      const { data: res } = await getDefaultText();
      this.defaultText = res.defaultText;
    },
    //   searchBar 搜索内容
    onSearchConfirm(val) {
      this.searchVal = val ? val : this.defaultText;
      // 保存搜索历史
      this.addSearchData(this.searchVal);
      //当用户进行输入时，如果包含输入的内容
      if (this.searchVal) {
        this.showType = SEARCH_RESULT;
      }
    },
    //   searchBar 获得焦点
    onSearchFocus(val) {
      this.showType = SEARCH_HISTORY;
    },
    //   searchBar 失去焦点
    onSearchBlur(val) {},

    //   searchBar 清空内容
    onSearchClear(val) {
      this.showType = SEARCH_HISTORY;
    },
    //   searchBar 取消按钮
    onSearchCancel(val) {
      this.showType = HOT_LIST;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-blog-container {
  .search-bar-box {
    background-color: $uni-bg-color;
    padding: $uni-spacing-row-sm;
    position: sticky;
    top: 0;
    z-index: 9;
  }
}
</style>
